// 响应式布局（断点控制） 通过参数动态调整断点，适配不同屏幕尺寸
@mixin respond-to($breakpoint) {
    @if $breakpoint == 'mobile' {
        @media screen and (max-width: 600px) { @content;}
    } @else if $breakpoint == 'tablet' {
        @media screen and (max-width: 900px) { @content;}
    }
}

@for $i from 1 to 5 {
    .col-#{$i} {
        width: 25% * $i;
    }
}

.header {
    @include respond-to("mobile"){
        height: 40px;
    }

      @include respond-to("tablet"){
        height: 60px;
    }
}

